<template>
  <div>
    <el-card>
      <el-row :gutter="20" style="margin-bottom: 15px;">
        <el-col :span="6">
          <el-input v-model="searchQuery" placeholder="输入服务名或Trace ID查询"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="fetchTraces">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;margin-top: 15px">
      <el-table-column prop="id" label="问题ID" width="200"></el-table-column>
      <el-table-column prop="name" label="问题名称" width="350"></el-table-column>
      <el-table-column prop="level" label="等级" width="60">
        <template #default="scope">
          <el-tag :type="getTagType(scope.row.level)">{{ scope.row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="entity" label="相关实体" width="200"></el-table-column>
      <el-table-column prop="mergeCount" label="合并问题数" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="detectTime" label="最新检测时间" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="200"></el-table-column>
      <el-table-column prop="impactTags" label="影响面" width="200">
        <template #default="scope">
          <div v-for="tag in scope.row.impactTags" :key="tag.text">
            <el-tag :type="tag.color" effect="dark">{{ tag.text }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="eventCount" label="关联事件数" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="openDrawer(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 抽屉 -->
    <el-drawer
        v-model="drawerVisible"
        title="问题详情"
        direction="rtl"
        :before-close="handleClose"
        size="50%"
    >
      <div class="custom-drawer-content">
        <!-- 基础信息 -->
        <el-card shadow="hover" class="info-card">
          <template #header>
            <span style="font-size: 16px; font-weight: bold;">基本信息</span>
          </template>
          <el-descriptions :column="1" border label-class-name="label-bold">
            <el-descriptions-item label="问题ID">{{ currentRow.id }}</el-descriptions-item>
            <el-descriptions-item label="问题名称">{{ currentRow.name }}</el-descriptions-item>
            <el-descriptions-item label="等级">
              <el-tag :type="getTagType(currentRow.level)" effect="dark">{{ currentRow.level }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="相关实体">{{ currentRow.entity }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag type="success" v-if="currentRow.status.includes('持续中')">🟢 持续中</el-tag>
              <el-tag type="info" v-else>🔵 已恢复</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 时间线 -->
        <el-card shadow="hover" class="time-card">
          <template #header>
            <span style="font-size: 16px; font-weight: bold;">时间线</span>
          </template>
          <el-timeline>
            <el-timeline-item :timestamp="currentRow.createTime" placement="top">
              <el-card shadow="never">
                <h5>创建时间</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item :timestamp="currentRow.detectTime" placement="top">
              <el-card shadow="never">
                <h5>最新检测时间</h5>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <!-- 其他信息 -->
        <el-card shadow="hover" class="extra-card">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="stat-box">
                <i-ep-document/>
                <span>合并问题数：{{ currentRow.mergeCount }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-box">
                <i-ep-link/>
                <span>关联事件数：{{ currentRow.eventCount }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 影响面 -->
        <el-card shadow="hover" class="impact-card">
          <template #header>
            <span style="font-size: 16px; font-weight: bold;">影响面</span>
          </template>
          <div class="tag-list">
            <el-tag v-for="tag in currentRow.impactTags" :key="tag.text" :type="tag.color" effect="dark">
              {{ tag.text }}
            </el-tag>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {ref} from 'vue';

// 表格数据源
const tableData = [
  {
    id: '9cfa4b9ba793408d85fc554cce09cac1',
    name: '异常监控 接口名称：/components/api/v1/mall/product exceptType：e40d976f45ccbb48 异常名称: RuntimeException 异常发生次数最近1分钟求平均 >= 100.0 次, 当前值 270.00000 次',
    level: 'P1',
    entity: '/components/api/v1/mall/product',
    mergeCount: 0,
    createTime: '2025/02/25 10:22:17',
    detectTime: '2025/02/25 10:23:28',
    status: '持续中 持续时长：4 分 27 秒',
    impactTags: [{color: 'warning', text: '后端服务:1'}],
    eventCount: 1
  },
  {
    id: '571f628fcdddc4085926cfb23249dc9f6',
    name: '应用调用类型统计 接口调用类型：http_client 应用依赖服务调用响应时间最近1分钟求平均 >= 3.0 毫秒, 当前值 3.0810 毫秒',
    level: 'P2',
    entity: '应用【mall-gateway】',
    mergeCount: 0,
    createTime: '2025/02/25 10:15:27',
    detectTime: '2025/02/25 10:23:28',
    status: '持续中 持续时长：11 分 17 秒',
    impactTags: [{color: 'warning', text: '后端服务:1'}],
    eventCount: 2
  },
  {
    id: '634492cf350941079c000d3148674848',
    name: '应用提供服务统计 接口名称：oteldemo.AdService/GetAds 接口调用类型：grpc 调用响应时间 最近1分钟最大值 >= 200.0 毫秒, 当前值 296.0541 毫秒',
    level: 'P4',
    entity: 'oteldemo.AdService/Get Ads',
    mergeCount: 0,
    createTime: '',
    detectTime: '2025/02/13 23:20:20',
    status: '持续中 持续时长：-',
    impactTags: [
      {color: 'info', text: '终端用户:1310'},
      {color: 'success', text: '前端应用:1'},
      {color: 'primary', text: '前端接口:1'}
    ],
    eventCount: 143
  },
  {
    id: 'b10d41e4c6c447848c5f8aaada29651f',
    name: '异常监控 接口名称：/components/api/v1/mall/product exceptType：e40d976f45ccbb48 异常名称: RuntimeException 异常发生次数最近1分钟求平均 >= 50.0 次, 当前值 360.00000 次',
    level: 'P2',
    entity: '/components/api/v1/mall/product',
    mergeCount: 0,
    createTime: '2025/02/25 10:24:17',
    detectTime: '2025/02/25 10:24:17',
    status: '被合并 持续时长：2 分 27 秒',
    impactTags: [{color: 'warning', text: '后端服务:1'}],
    eventCount: 1
  },
  {
    id: '77cbf3f8b07747689456ca08581a947e',
    name: '异常监控 接口名称：/components/api/v1/mall/product exceptType：e40d976f45ccbb48 异常名称: RuntimeException 异常发生次数最近1分钟求平均 >= 50.0 次, 当前值 360.00000 次',
    level: 'P2',
    entity: '/components/api/v1/mall/product',
    mergeCount: 0,
    createTime: '2025/02/25 10:24:17',
    detectTime: '2025/02/25 10:24:17',
    status: '被合并 持续时长：2 分 27 秒',
    impactTags: [{color: 'warning', text: '后端服务:1'}],
    eventCount: 1
  }
];

// 抽屉控制
const drawerVisible = ref(false);
const currentRow = ref({});

// 打开抽屉并设置当前行数据
function openDrawer(row) {
  currentRow.value = row;
  drawerVisible.value = true;
}

// 关闭抽屉前确认
function handleClose(done) {
  done()
}

// 根据等级返回标签类型
function getTagType(level) {
  if (level === 'P1') return 'danger';
  else if (level === 'P2') return 'warning';
  else if (level === 'P4') return 'info';
  return '';
}
</script>

<style scoped>
.demo-drawer__content {
  padding: 16px;
}
</style>